<template>
	<view class="stepper">
		<template v-if="num > 0 || isShowZero || itemNum > 0">
			<view hover-class="zoom-hover" :class="limitMinus || (confirm && (num === 1 || itemNum === 1))? 'hotarea limit' : 'hotarea'"
			 @click.stop="onMinus">
				<text class="iconfont icon-minus"></text>
			</view>
			<view class="num">{{itemNum?itemNum:num}}</view>
		</template>
		<view hover-class="zoom-hover" :class="limitAdd || max === 1 ? 'hotarea limit' : 'hotarea'" @click.stop="onAdd">
			<text class="iconfont icon-plus"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Stepper',

		props: {
			//数字为0的时候是否显示减号和数字
			isShowZero: {
				type: Boolean,
				default () {
					return false;
				}
			},
			// 来源 0单商品(直接加入购物车)， 1套餐组选项||选加量或搭配（返回点击事件）
			fromOrigin: {
				type: Number,
				default () {
					return 0;
				}
			},
			// 组内最大值
			maxQty: {
				type: Number
			},
			// 已选总和
			sum: {
				type: Number
			},
			// 最大
			max: {
				type: Number
			},
			// 最小
			min: {
				type: Number
			},
			// 套餐内单个产品数量(只读) 与data的num区分
			itemNum: {
				type: Number,
				default () {
					return 0;
				}
			},
			// 在购物车中此产品信息
			cartInfo: {
				type: Object,
				default () {
					return {};
				}
			},
			// 在购物车中此产品的索引值
			cartIndex: {
				type: Number
			},
			// 产品完整信息
			product: {
				type: Object,
				default () {
					return null;
				}
			},
			// 是否在确认页
			confirm: {
				type: Boolean,
				default () {
					return false
				}
			},
		},
		data() {
			return {
				num: 0,
				limitMinus: false, // 是否限制减号
				limitAdd: false, // 是否限制加号
			};
		},
		computed: {
			// 产品id
			productId() {
				if (!this.product && !this.cartInfo.productId) {
					return "";
				}
				let productId = '';
				if (this.product) {
					productId = this.product.id;
				} else {
					productId = this.cartInfo.productId;
				}
				return productId
			},

			// 当前商品是否在购物车中
			curCart() {
				const cartList = this.$store.state.cartList || [];
				let carts = [...cartList];
				if (this.cartIndex === undefined) {
					carts = carts.filter(item => !item.couponId);
				}
				const curCart = carts.filter((item, index) => ((this.cartIndex === index || this.cartIndex === undefined) && item.productId ==
					this.productId));
				if (curCart.length) {
					this.num = curCart[0].productCount;
				}

				return curCart[0] || {};
			}
		},
		watch: {
			// 监听当前商品在购物车中的数量
			'curCart.productCount'(data) {
				if (data) {
					this.num = data
				} else {
					this.num = 0;
				}
			},

			// 监听总和，限制加减
			sum() {
				this.limitJudge();
			},
		},
		mounted() {
			this.limitJudge();
		},
		methods: {
			// 限制加减号判断
			limitJudge() {
				if (this.max && (this.max === this.num || this.max === this.itemNum)) {
					this.limitAdd = true;
				}

				if (this.sum === undefined) {
					return;
				}

				// 限制减号
				if ((this.min !== undefined && this.itemNum <= this.min) || this.itemNum === 0) {
					this.limitMinus = true;
				} else {
					this.limitMinus = false;
				}

				// 限制加号
				if (this.max !== undefined && this.itemNum === this.max) {
					this.limitAdd = true;
				} else {
					if (this.sum && (this.maxQty === this.sum)) {
						this.limitAdd = true;
					} else {
						this.limitAdd = false;
					}
				}
			},

			// 点击加号
			onAdd() {
				if (this.limitAdd || this.max === 1) return;

				if (this.fromOrigin === 1) {
					this.$emit("handleAdd", 1); //传递给父组件说点击了加号
					return;
				}

				let {
					cartList,
					productsMap
				} = this.$store.state;
				let product = productsMap[this.productId];

				if (!product) {
					uni.showToast({
						title: '此产品不在产品库中',
						icon: 'none'
					});
					return;
				}

				let isHas = false; // 是否包含在购物车中
				let triggerLimit = false; // 是否触发限制 已购最大量
				cartList.length && cartList.map((item, index) => {
					if (this.cartIndex === undefined) {
						if(!item.couponId) {
							if (item.productId === this.productId) {
								if (item.productCount >= product.max) {
									triggerLimit = true;
								} else {
									item.productCount++;
								}
								isHas = true;
							}
						}
					} else {
						if(item.productId === this.productId && this.cartIndex === index) {
							if (item.productCount >= product.max) {
								triggerLimit = true;
							} else {
								item.productCount++;
							}
							isHas = true;
						}
					}
				});

				if (triggerLimit) return;

				// 从菜单中添加商品到购物车 第一次添加
				if (!isHas && product) {
					const freePrice = Number((product.originPrice - product.basePrice).toFixed(1));
					cartList.push({
						boxFee: product.boxprice || 0,
						boxNum: 0,
						child: [],
						code: product.code,
						freePrice,
						isspecPrice: 0,
						orinPrice: product.originPrice,
						productCount: 1,
						productId: this.productId,
						productName: product.name,
						salePrice: product.basePrice,
						specialPrice: product.specialPrice || 0,
						vipPrice: 0,
						addPrice: 0,
						// 图片 购物车显示用，提交订单时删除它
						img: product.pic,
					})
				}

				this.$store.commit('handleCartList', cartList);


			},

			// 点击减号
			onMinus(e) {
				if (this.limitMinus) return;

				if (this.fromOrigin === 1) {
					this.$emit("handleMinus", 1); //传递给父组件说点击了减号
					return;
				}

				if (this.min && this.num <= this.min) return;

				let {
					cartList,
					menuCoupons
				} = this.$store.state;
				
				if (this.num >= 1) {
					cartList.map((item, index) => {
					
						if (item.productId === this.productId) {
							if (this.cartIndex === undefined) { // 商品列表中

								if (item.productCount > 1) { //此产品数量减
									item.productCount--;
								} else { // 移除此产品
									cartList.splice(index, 1);
								}

							} else if (this.cartIndex === index) { // 购物车中

								if (item.couponId && item.couponId === this.cartInfo.couponId) {
									cartList.splice(index, 1);
								} else {
									if (item.productCount > 1) { //此产品数量减
										item.productCount--;
									} else { // 移除此产品
										cartList.splice(index, 1);
									}
								}

							} else {}
						}
						
					});

					this.$store.commit('handleCartList', cartList);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	@import "~@/common/styles/common.less";

	.stepper {
		width: 158rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.hotarea {
		width: 48rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 50%;
		font-size: 32rpx;
		text-align: center;
		opacity: .95;
		background: #333;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, .08);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: .05s linear;

		.iconfont {
			font-size: 22rpx;
			font-weight: bold;
			color: @primary;
		}

		&.limit {
			background: #ddd;
			border-color: #ddd;

			.iconfont {
				color: #fff;
			}
		}

	}

	.num {
		width: 62rpx;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 28rpx;
		text-align: center;
	}
</style>
